<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>新用户注册</title>
<c:import url="/ctrl/header"></c:import>
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}
</style>
<script>
function enter() {
    var value = $("#userid").val();
    if (value == "中、英文均可，12字符以内") {
        $("#userid").val("");
        $("#userid").css("color", "black");
    }
    $("#username_error").html("");
}
function enter1() {
    $("#pwd_error").html("");
}
function enter2() {
    $("#pwd2_error").html("");
}
function enter3() {
    $("#mail_error").html("");
    var value = $("#email").val();
    if (value == "请输入正确邮箱便于找回密码") {
        $("#email").val("");
        $("#email").css("color", "black");
    }
}
function enter4() {
    $("#otherName_error").html("");
}
function enter5() {
    $("#tel_error").html("");
}
function enter6() {
    var value = $("#other").val();
    if (value == "如:QQ 12345678") {
        $("#other").val("");
    }
}
function enter7() {
    $("#otherName_error").html("");
}
function checkPwd() {
    var pwd = /^[A-Za-z0-9_-]+$/;
    var password = $("#userpwd").val();
    if ($.trim(password) == "") {
        $("#pwd_error").css("color", "red");
        $("#pwd_error").text("请输入密码");
        return false;
    }
    if (!RegExp(pwd).test(password)) {
        $("#pwd_error").css("color", "red");
        $("#pwd_error").text("密码由英文、数字及“_”、“-”组成");
        return false;
    }
    if (password.length < 6 || password.length > 20) {
        $("#pwd_error").css("color", "red");
        $("#pwd_error").text("密码长度只能在6-20位字符之间");
        return false;
    }    
    return true;
}
function checkPwdOk() {
    var pwd1 = $.trim($("#userpwd").val());
    var pwd2 = $.trim($("#userpwdok").val());
    if (pwd2 == "") {
        $("#pwd2_error").css("color", "red");
        $("#pwd2_error").text("请输入密码");
        return false;
    }
    if (pwd1 != pwd2) {
        $("#pwd2_error").css("color", "red");
        $("#pwd2_error").text("两次输入的密码不一致");
        return false;
    }
    return true;
}
function checkEmail() {
    var emailVal = $.trim($("#email").val());
    var email = "^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$";
    if (emailVal == "") {
        $("#mail_error").css("color", "red");
        $("#mail_error").text("请输入邮箱");
        return false;
    }
    if (!RegExp(email).test(emailVal)) {
        $("#mail_error").css("color", "red");
        $("#mail_error").text("邮箱格式不正确");
        return false;
    }
    $.getJSON("/reg/checkemail.json", {
    	email: emailVal
    	}, function(data) {
            if (data && !data.ok) {
                $("#mail_error").css("color", "red");
                $("#mail_error").text("此邮箱已经存在！");
                return false;
            };
        });
    return true;
}
function checkOtherName() {
    var otherName = $.trim($("#name").val());
    if (otherName == "") {
        $("#otherName_error").css("color", "red");
        $("#otherName_error").text("请输入联系人姓名");
        return false;
    }
    return true;
}
function checkTel() {
    var tel = /^[0-9_-]+$/;
    var telphone = $("#tel").val();
    if ($.trim(telphone) == "") {
        $("#tel_error").css("color", "red");
        $("#tel_error").text("请输入联系人电话");
        return false;
    }
    if (!RegExp(tel).test(telphone)) {
        $("#tel_error").css("color", "red");
        $("#tel_error").text("只能是纯数字");
        return false;
    }
    return true;
}
function checkWay() {
    var val = $('input:radio[name="way"]:checked').val();
    if (val == null) {
        alert("请选择了解途径");
        return false;
    }
    return true;
}
function checkCode() {
    $("#codeError").css("color", "black");
    $("#codeError").text("");
    var code = $("#txtIdentityCode").val();
    if ($.trim(code) == "") {
        $("#codeError").val("请输入验证码");
        return false;
    }
    $.getJSON("/reg/checkcode.json", {
    	code:code 
    	}, function(data) {
            if (data && !data.ok) {
                $("#codeError").css("color", "red");
                $("#codeError").text("验证码输入错误");
                return false;
            }
        });
    return true;
}
function checkName()
{
	var name = $("#userid").val();
    var user = "^[A-Za-z0-9_\\-\\u4e00-\\u9fa5]+$";
    if ($.trim(name) == "" || name == "中、英文均可，12字符以内") {
        $("#username_error").css("color", "red");
        $("#username_error").text("请输入用户名");
        return false;
    }
    if (!RegExp(user).test(name)) {
        $("#username_error").css("color", "red");
        $("#username_error").text("由4-12位中文、英文、数字及“_”、“-”组成");
        return false;
    }
    if (name.length < 4) {
        $("#username_error").css("color", "red");
        $("#username_error").text("用户名长度只能在4-12位字符之间");
        return false;
    }
    if (name.length > 12) {
        $("#username_error").css("color", "red");
        $("#username_error").text("用户名长度只能在4-12位字符之间");
        return false;
    }
    $.getJSON("/reg/checkname.json", {
    	userName: name
    	}, function(data) {
            if (data && !data.ok) {
                $("#username_error").css("color", "red");
                $("#username_error").text("此用户已经存在！");
                return false;
            };
    });
    return true;
}
function checkSubmit() {
    if(!checkName())
    	return;
    if(!checkPwd())
    	return;
    if(!checkPwdOk()) 
    	return;
    if(!checkEmail())
    	return;
    if(!checkOtherName())
        return;
    if(!checkTel())
        return;
    if(!checkCode())
        return;  
    submitCust();
}
</script>
</head>
<body>
  <c:import url="/ctrl/top"></c:import>
  <div class="container">
    <form name="registerForm" method="post" action="" id="registerForm">
      <div class="span10">
        <h1 style="text-align: center;">新用户注册</h1>
      </div>
      <div class="row-fluid">
        <div class="span5">
          <div id="register">
            <div class="field">
              <label style="font-size: larger; font-weight: bolder;">
                以下为必填</label>
            </div>
            <div class="field">
              <label>用户名</label>
              <div class="fl">
                <input id="userid" name="userid" type="text"
                  class="txt-input" onblur="checkName();"
                  onfocus="enter();" value="中、英文均可，12字符以内"
                  style="color: Gray;" /><span id="username_error"
                  style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>密码</label>
              <div class="fl">
                <input name="userpwd" id="userpwd" type="password"
                  class="txt-input" onblur="checkPwd();"
                  onfocus="enter1();" /><span id="pwd_error"
                  style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>再次输入密码</label>
              <div class="fl">
                <input name="userpwdok" id="userpwdok" type="password"
                  class="txt-input" onblur="checkPwdOk();"
                  onfocus="enter2();" /><span id="pwd2_error"
                  style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>电子邮箱</label>
              <div class="fl">
                <input name="email" id="email" type="text"
                  class="txt-input" onblur="checkEmail();"
                  onfocus="enter3();" value="请输入正确邮箱便于找回密码"
                  style="color: Gray;" /><span id="mail_error"
                  style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>联系人姓名</label>
              <div class="fl">
                <input name="name" id="name" type="text"
                  class="txt-input" onblur="checkOtherName();"
                  onfocus="enter7();" /><span id="otherName_error"
                  style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>联系电话</label>
              <div class="fl">
                <input name="tel" id="tel" type="text" class="txt-input"
                  onblur="checkTel();" onfocus="enter5();" /><span
                  id="tel_error" style="font-size: smaller;"></span>
              </div>
            </div>
            <div class="field">
              <label>了解途径</label>
              <div class="fl" style="font-size: small;">
                <c:forEach var="from" items="${fromList}">
                  <input type="radio" name="from"
                    value="<c:out value="${from.name}" />"
                    <c:if test="${custExt.extFrom==from.name}">checked="checked"</c:if> />
                  <c:out value="${from.name}" />
                </c:forEach>
              </div>
            </div>
            <div class="field">
              <label>验证码</label>
              <div class="fl">
                <input type="text" maxlength="4" size="6"
                  id="txtIdentityCode" name="txtIdentityCode"
                  onblur="checkCode();" /><a
                  href="javascript:changeCode()" title="看不清楚，换一下">&nbsp;<img
                  src="/code?randomcode=1207" id="imgCode"
                  name="imgCode" border="0" /></a>&nbsp;<a
                  href="javascript:changeCode()" title="看不清楚，换一下">看不清楚？换一下</a><span
                  id="codeError" style="font-size: smaller;"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="span5">
          <div id="regLogin-other">
            <div class="field">
              <label
                style="font-size: larger; width: 350px; font-weight: bolder;">
                以下信息有助于您的账号尽快取得更优惠的价格</label>
            </div>
            <div class="field">
              <label>其他联系方式</label>
              <div class="fl">
                <input name="other" id="other" type="text"
                  class="txt-input" value="如:QQ 12345678"
                  style="color: Gray;" onmousedown="enter6();" />
              </div>
            </div>
            <div class="field">
              <label>公司名称</label>
              <div class="fl">
                <input name="company" id="company" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司地址</label>
              <div class="fl">
                <input name="address" id="address" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司邮编</label>
              <div class="fl">
                <input name="mailcode" id="mailcode" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司电话</label>
              <div class="fl">
                <input name="companyTel" id="companyTel" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司网址</label>
              <div class="fl">
                <input name="companyUrl" id="companyUrl" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司注册号</label>
              <div class="fl">
                <input name="compaynNum" id="compaynNum" type="text"
                  class="txt-input" />
              </div>
            </div>
            <div class="field">
              <label>公司负责人</label>
              <div class="fl">
                <input name="manger" id="manger" type="text"
                  class="txt-input" />
              </div>
            </div>
          </div>
        </div>
        <div class="span10">
          <div class="field">
            <label>&nbsp;</label>
            <div class="fl" style="font-size: smaller;">
              <input type="button" value="立即注册"
                class="button btn-big btn-orange"
                onclick="checkSubmit()" /> 我已经注册，现在就去<a href="/login">登录</a>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <c:import url="/ctrl/footer"></c:import>

</body>
</html>
